<template>
    <div>
        <!-- 面包屑导航区域 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>集群管理</el-breadcrumb-item>
            <el-breadcrumb-item>通用配置模板</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 卡片视图区 -->
        <el-card class="box-card">
            <el-row :gutter="20">
                <el-col :span="8">
                    <!-- 搜索与添加区 -->
                    <el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear="getTemplateList">
                        <el-button slot="append" icon="el-icon-search" @click="getTemplateList"></el-button>
                    </el-input>
                </el-col>
                <el-col :span="4">
                    <el-button type="primary" icon="el-icon-circle-plus" @click="showTemplateAddPage">添加模板</el-button>
                </el-col>
            </el-row>
        </el-card>

        <!-- 模板列表区 -->
        <el-table :data="templateList" border stripe>
            <el-table-column label="#" type="index"></el-table-column>
            <el-table-column label="模板名称" prop="name" width="180px"></el-table-column>
            <el-table-column label="端口" prop="db_port"></el-table-column>
            <el-table-column label="常规用户" prop="db_user"></el-table-column>
            <el-table-column label="复制模式" prop="replication_mode"></el-table-column>
            <el-table-column label="兼容模式" prop="db_mode"></el-table-column>
            <el-table-column label="加密方式" prop="encryption"></el-table-column>
            <el-table-column label="服务器编码" prop="server_encoding"></el-table-column>
            
            <!-- <el-table-column label="状态">
                <template slot-scope="scope">
                    <el-switch v-model="scope.row.mg_state" @change="templateStateChanged(scope.row)"></el-switch>
                </template>
            </el-table-column> -->

            <el-table-column label="操作" width="120px">
                <template slot-scope="scope">
                    <el-button type="primary" icon="el-icon-edit" size="mini" @click="showTemplateEditPage(scope.row.id)"></el-button>
                    <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeTemplateById(scope.row.id)"></el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页区域 -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.pagenum"
            :page-sizes="[1, 2, 5, 10]" :page-size="queryInfo.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>

    </div>
</template>

<script>
export default {
    data: function () {
        return {
            queryInfo: {
                query: '',
                pagenum: 1,
                pagesize: 5
            },
            templateList: [],
            total: 0,
        }
    },
    created: function () {
        this.getTemplateList();
    },
    methods: {
        getTemplateList: async function () {
            const result = await this.$http.get('templates', {
                params: this.queryInfo
            });
            const res = result.data;
            if (res.meta.status !== 200) return this.$message.error(`获取通用配置模板列表失败：${res.meta.msg}`);

            this.templateList = res.data.templates;
            this.total = res.data.totalpage;
        },
        handleSizeChange: function (newPageSize) {
            // 前往页数改变时触发
            this.queryInfo.pagesize = newPageSize;
            this.getTemplateList();
        },
        handleCurrentChange: function (newPage) {
            // 点击页码时触发
            this.queryInfo.pagenum = newPage;
            this.getTemplateList();
        },
        showTemplateAddPage: function () {
            this.$router.push('/templates/add');
        },
        showTemplateEditPage: function (id) {
            this.$router.push({
                path: '/templates/edit',
                query: { 
                    tid: id,
                }
            });
        },
        removeTemplateById: async function (id) {
            const rm = await this.$confirm('此操作将永久删除该模板, 是否继续?', '确认', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).catch(err => err);

            if (rm !== 'confirm') {
                return this.$message.info('已取消删除');
            }
            // this.$message.info('确认删除');
            const result = await this.$http.delete(`templates/${id}`);
            const res = result.data;

            if (res.meta.status !== 200) return this.$message.error(`删除模板失败: ${res.meta.msg}`);
            this.$message.success('删除模板成功');

            // 刷新模板列表
            this.getTemplateList();
        }
    }
}
</script>

<style lang="less" scoped>

</style>